@utility container {
  @apply mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-10 3xl:max-w-screen-2xl;
}

@utility shiki {
  & code span {
    color: var(--shiki-light);
  }
  .dark & code span {
    color: var(--shiki-dark);
  }
  .highlighted {
    margin: 0 -16px;
    padding: 2px 16px;
    background-color: var(--color-muted) !important;
  }
}

@utility dark {
  & .shiki code span {
    color: var(--shiki-dark);
  }
}

@utility step {
  counter-increment: step;

  &:before {
    @apply absolute inline-flex size-9 items-center justify-center rounded-xl border-4 border-bg bg-muted text-center -indent-px font-mono text-sm font-medium text-fg-muted;
    @apply mt-[-4px] ml-[-50px];
    content: counter(step);
  }
}

@utility category {
  @apply relative;

  &:before {
    @apply absolute top-0 left-0 mt-2 -ml-1 h-2 w-2 rounded-full bg-border content-[''];
  }

  &:after {
    @apply absolute top-3 left-0 h-3 w-px bg-border content-[''];
  }
}

@utility transition-sidebar {
  transition-property: transform, width, left, opacity, color;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

@utility diagonal-pattern {
  --pattern-fg: color-mix(in oklab, var(--color-fg) 7%, transparent);
  @apply h-full border-x border-x-(--pattern-fg) bg-[image:repeating-linear-gradient(315deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px];
}

.shiki,
.shiki span {
  background-color: transparent !important;
}
